<template>
	<div>
		<van-nav-bar :title="title" :fixed="true" left-arrow @click-left="onClickLeft" />

		<van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />

		<!-- 优惠券列表 -->
		<van-popup v-model="showList" position="bottom">
			<van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
		</van-popup>


	</div>
</template>

<script>
	const coupon = {
		available: 1,
		condition: '无使用门槛\n最多优惠12元',
		reason: '',
		value: 150,
		name: '优惠券名称',
		startAt: 1489104000,
		endAt: 1514592000,
		valueDesc: '1.5',
		unitDesc: '元'
	};

	export default {
		name: "DiscountCoupon",
		data() {
			return {
				title: "优惠券",
				chosenCoupon: -1,
				coupons: [coupon],
				disabledCoupons: [coupon],
				showList: ''
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			onChange(index) {
				this.showList = false;
				this.chosenCoupon = index;
			},
			onExchange(code) {
				this.coupons.push(coupon);
			}
		}
	}
</script>

<style scoped="">
	.van-nav-bar__title {
		color: #fff;
		font-size: 14px;
	}

	.van-nav-bar {
		height: 46px;
		background: #d46170;
	}

	.van-icon,
	.van-icon::before {
		color: #FFF;
		font-size: 12px;
	}

	h6 {
		margin-top: 50%;
		text-align: center;
		font-size: 12px;
		font-weight: normal;
		color: #999;
	}

	.van-coupon-cell {
		margin-top: 46px;
	}
	
	.van-coupon p{font-size: 11px;}
</style>
